<template>
  <div class="user-info-page min-h-screen py-12 relative">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 z-0 overflow-hidden bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50">
      <!-- 抽象波浪背景 -->
      <div class="absolute top-0 left-0 w-full h-full opacity-30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full h-full">
          <path fill="#4f46e5" fill-opacity="0.1"
                d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,218.7C960,192,1056,128,1152,117.3C1248,107,1344,149,1392,170.7L1440,192L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
        </svg>
      </div>
      <div class="absolute bottom-0 left-0 w-full h-full opacity-20">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full h-full">
          <path fill="#8b5cf6" fill-opacity="0.2"
                d="M0,64L48,96C96,128,192,192,288,192C384,192,480,128,576,128C672,128,768,192,864,213.3C960,235,1056,213,1152,176C1248,139,1344,85,1392,58.7L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
      </div>

      <!-- 装饰元素 -->
      <div class="absolute top-20 left-10 w-40 h-40 rounded-full bg-purple-300/10 blur-3xl"></div>
      <div class="absolute top-40 right-10 w-60 h-60 rounded-full bg-gray-800/10 blur-3xl"></div>
      <div class="absolute bottom-20 left-1/4 w-80 h-80 rounded-full bg-indigo-500/5 blur-3xl"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧：用户信息 -->
        <div class="w-full"
             :class="[!userStore.isCurrentUser(user.id)?'':'lg:w-3/5']">
          <UserInfoCard
              :user="user"
              @edit-profile="handleEditProfile"
              @follow="handleFollow"
              @message="handleMessage"
              @share="handleShare"
          />
        </div>

        <!-- 右侧：会员区域 -->
        <div class="lg:w-2/5 w-full" v-if="userStore.isCurrentUser(user.id)">
          <MembershipCard
              :user="user"
              @subscribe="handleSubscribe"
              @redeem="showRedeemModal = true"
              @open-membership-center="handleOpenMembershipCenter"
          />
        </div>
      </div>

      <!-- 下方：作品/点赞/收藏 Tab区域 -->
      <div class="mt-6">
        <TabsGallery :user="user" />
      </div>
    </div>

    <!-- 兑换会员码弹窗 -->
    <RedeemCodeModal
        :show="showRedeemModal"
        @close="showRedeemModal = false"
        @confirm="handleRedeemConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useUserStore} from "@/stores/useUserStore";
import {useRoute} from "vue-router";
import {getSearchUserInfoRequestByGet, UserVo} from "@/api/user-service";
import router from "@/router";
import MembershipCard from './components/MembershipCard.vue';
import UserInfoCard from './components/UserInfoCard.vue';
import RedeemCodeModal from './components/RedeemCodeModal.vue';
import TabsGallery from './components/TabsGallery.vue';
import {message} from "@/plugins/message";
import {UserExchangeVipRequest, userExchangeVipRequestByPost} from "@/api/exchange-service";

const route = useRoute()
const userStore = useUserStore()
const user = ref<UserVo>({})

// 弹窗控制
const showRedeemModal = ref(false);

const getUserInfoDetail = async (id: string) => {
  const res = await getSearchUserInfoRequestByGet(id)
  if (res.code != 200) {
    router.push({
      path: "/notFound"
    })
    return;
  }
  user.value = res.data
}

// 处理会员相关事件
const handleSubscribe = () => {
  console.log('用户点击了立即开通会员')
  // 这里可以添加开通会员的逻辑
}

const handleRedeem = () => {
  console.log('用户点击了兑换会员码')
  showRedeemModal.value = true;
}

const handleRedeemConfirm = async (code: string) => {
  console.log('用户提交了兑换码:', code);
  if (!code){
    message.error("兑换失败","请输入兑换码")
    return
  }
  const userExchangeVipRequest = {
    code:code
  } as UserExchangeVipRequest

  try {
    // 这里可以添加实际的兑换码验证和处理逻辑，例如发送API请求
    // 模拟API请求成功
    const res = await userExchangeVipRequestByPost(userExchangeVipRequest)
    console.log(res);
    if (res.code!=200){
      message.error("兑换失败",res.description);
      return
    }
    // 显示成功消息
    message.success("兑换成功","您的会员特权已激活")

    // 关闭弹窗
    showRedeemModal.value = false;

    // 可能需要刷新用户信息或会员状态

  } catch (error) {
    console.error('兑换码处理失败:', error);
    message.error("兑换失败","系统错误")
  }
}

const handleOpenMembershipCenter = () => {
  console.log('用户点击了会员权益中心')
  // 这里可以添加打开会员权益中心的逻辑
}

// 处理用户信息相关事件
const handleEditProfile = () => {
  console.log('用户点击了编辑资料')
  // 这里可以添加编辑资料的逻辑
}

const handleFollow = () => {
  console.log('用户点击了关注')
  // 这里可以添加关注用户的逻辑
}

const handleMessage = () => {
  console.log('用户点击了发消息')
  // 这里可以添加发送消息的逻辑
}

const handleShare = () => {
  console.log('用户点击了分享')
  // 这里可以添加分享用户主页的逻辑
}

onMounted(() => {
  const id = route.params.id
  getUserInfoDetail(id)
})
</script>

<style scoped>
.user-info-page {
  background-color: #f9fafb;
}
</style> 